<template>
  <div id="subsidiary">
    <el-radio-group size="mini" v-model="progress" class="tabs">
      <el-radio-button @click.native="typeIndex=1" label="ongoing">代理明细</el-radio-button>
      <el-radio-button @click.native="typeIndex=2" label="rotary">会员明细</el-radio-button>
    </el-radio-group>

    <!-- 代理明细列表 -->
    <div class="listOf" v-if="typeIndex==1?true:false">
      <!-- 搜索 -->
      <el-input
        class="edge"
        style="width:180px"
        size="mini"
        placeholder="交易流水号,账号"
        prefix-icon="el-icon-search"
        v-model="keyword"
      ></el-input>

      <!-- 收支类型 -->
      <el-select
        class="edge"
        style="width:180px"
        clearable
        size="mini"
        v-model="winagent"
        placeholder="收支类型"
      >
        <el-option v-for="item in agent" :key="item.value" :label="item.value" :value="item.code"></el-option>
      </el-select>



      <!-- 交易时间 -->

      <!-- 时间 -->
      <el-date-picker
        class="edge"
        style="width:180px"
        size="mini"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        v-model="startTime"
        type="date"
        placeholder="开始时间"
      ></el-date-picker>
      <span>至</span>
      <el-date-picker
        class="edge"
        style="width:180px"
        size="mini"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        v-model="endTime"
        type="date"
        placeholder="结束时间"
      ></el-date-picker>
      <!-- 确定 -->
      <el-button
        style="margin-left:10px"
        size="mini"
        type="primary"
        @click="detaillistr"
      >确认</el-button>
      <el-button class="edge" size="mini" @click="assert">重置</el-button>
      <!-- 列表 -->
      <div style="margin-top:20px">
        <el-table
          border
          size="mini"
          :header-cell-style="{background:'#ccc'}"
          :data="tabletime"
          style="width: 100%"
        >
          <el-table-column prop="userId" label="交易流水号"></el-table-column>
          <el-table-column prop="type" label="收支类型"></el-table-column>
          <el-table-column prop="userAccount" label="账号"></el-table-column>
          <el-table-column prop="afterChange" label="余额"></el-table-column>
          <el-table-column prop="beforeChange" label="剩余余额"></el-table-column>
          <el-table-column prop="" label="备注"></el-table-column>
          <el-table-column prop="createTime" label="交易时间"></el-table-column>
        </el-table>
      </div>

       <!-- 分页 -->
    <div style="text-align:right;margin-top:20px">
        <el-pagination size="mini"
      class="pageNumage"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
    </div>
    </div>

    <!-- 会员明细 -->
    <div class="listOf" v-if="typeIndex==2?true:false">
      <!-- 搜索 -->
      <el-input
        class="edge"
        style="width:180px"
        size="mini"
        placeholder="交易流水号,账号"
        prefix-icon="el-icon-search"
        v-model="keyword"
      ></el-input>

      <!-- 收支类型 -->
      <el-select
        class="edge"
        style="width:180px"
        clearable
        size="mini"
        v-model="winagent"
        placeholder="收支类型"
      >
        <el-option v-for="item in agent" :key="item.value" :label="item.value" :value="item.code"></el-option>
      </el-select>
      <!-- 交易时间 -->

      <!-- 时间 -->
      <el-date-picker
        class="edge"
        style="width:180px"
        size="mini"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        v-model="startTime"
        type="date"
        placeholder="开始时间"
      ></el-date-picker>
      <span>至</span>
      <el-date-picker
        class="edge"
        style="width:180px"
        size="mini"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        v-model="endTime"
        type="date"
        placeholder="结束时间"
      ></el-date-picker>
      <!-- 确定 -->
      <el-button style="margin-left:10px" size="mini" type="primary" @click="list">确认</el-button>
      <el-button class="edge" size="mini" @click="assert">重置</el-button>
      <!-- 列表 -->
      <div style="margin-top:20px">
        <el-table
          border
          size="mini"
          :header-cell-style="{background:'#ccc'}"
          :data="tablet"
          style="width: 100%"
        >
          <el-table-column prop="id" label="交易流水号"></el-table-column>
          <el-table-column prop="type" label="收支类型"></el-table-column>
          <el-table-column prop="userAccount" label="账号"></el-table-column>
          <el-table-column prop="beforeChange" label="余额"></el-table-column>
          <el-table-column prop="afterChange" label="剩余余额"></el-table-column>
          <el-table-column prop="description" label="备注"></el-table-column>
          <el-table-column prop="createTime" label="交易时间"></el-table-column>
        </el-table>
      </div>
       <!-- 分页 -->
    <div style="text-align:right;margin-top:20px">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrent"
        :total="total1"
        size="mini"
        :page-size="10"
      ></el-pagination>
    </div>
    </div>
   
  </div>
</template>
<script>
import { getList } from "@/api/table";
import { accountBook,Balance,willlist} from "@/api/user";
import qs from "qs";
export default {
  name: "subsidiary",
  data() {
    return {
      value1: "",
      type:[],//会员收支
      typeIndex: "1",
      progress: "ongoing",
      input1: "",
      agent:[],//收支
      winagent: "", //代理收支类型
      winstatus: "", //会员收支类型
      winNumber: [],
      tabletime: [], //代理
      tablet: [], //会员
      keyword: "", //会员搜索
      startTime:"", //开始时间
      endTime: "", //结束时间
      total:1,
      pageNum:1,
      total1:1,
      
      
    };
  },

 created(){
   this.payments();
   this.agentdetail();//代理明细
   this.willlistid();
 },
  methods: {
  //  收支类型
   payments(){
     let data = qs.stringify({
        
      });
      Balance(data).then(res => {
        console.log(res.data, "收支类型");
        if (res.data.code == 200) {
          this.agent = res.data.data
          
        } else {
          this.$message.error(res.data.msg);
        }
       
      });
   },
  //  代理明细
  agentdetail(){
     let data = qs.stringify({
        pageNum:this.pageNum,
        pageSize:10,
        keyword:this.keyword,
        type:this.winagent,
        startTime:this.startTime,
        endTime:this.endTime
      });
      accountBook(data).then(res => {
        console.log(res.data, "代理明细");
        if (res.data.code == 200) {
          this.tabletime = res.data.data
          this.total = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
       
      });
  },

  // 会员明细
  willlistid(){
    let data = qs.stringify({
        pageNum:this.pageNum,
        pageSize:10,
        keyword:this.keyword,
        type:this.winagent,
        startTime:this.startTime,
        endTime:this.endTime
      });
      willlist(data).then(res => {
        console.log(res.data, "代理明细");
        if (res.data.code == 200) {
          this.tablet = res.data.data
          this.total1 = res.data.count;
        } else {
          this.$message.error(res.data.msg);
        }
       
      });
  },
   
   
    // 确定
    detaillistr(){
       this.agentdetail();
    },
    list(){
      this.willlistid();
    },
     // 代理分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.agentdetail();
    },
    handleCurrent(val){
       this.pageNum = val;
       this.willlistid();
    },
    // 时间
    getSTime(t) {
      console.log(t, 777);
    },
    clickAdd(index) {
      this.currentClass = index;
    },
  //  取消
  assert(){
    this.keyword="",
    this.startTime= "",
    this.endTime = ""
  }
    
   
  }
};
</script>
<style lang='less' scope>
#subsidiary {
  margin-top: 20px;
  margin-left: 20px;
  .dataTime {
    font-size: 13px !important;
    padding: 0 5px;
  }
}
.edge {
  margin: 10px 10px 20px 0 !important;
}
.nowColor {
  color: #409eff !important;
}
.listOf {
  margin-top: 20px;
  
}
</style>